<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script>
            function fn(a, c) {
                // console.log(ggggg); // Uncaught ReferenceError: ggggg is not defined
                console.log('xx : ', xx);
                console.log('yy : ', yy);
                console.log('zz : ', zz);
                var xx = function () {};
                function yy() {}
                var zz = 666;
                console.log('xx : ', xx);
                console.log('yy : ', yy);
                console.log('zz : ', zz);

                console.log('=================');

                console.log('a : ', a);
                console.log('b : ', b);
                console.log('c : ', c);
                console.log('d : ', d);
                console.log('f : ', f);
                console.log('----------------');

                a();
                // console.log("abc : ", abc); // Uncaught ReferenceError: abc is not defined
                var a = 123;
                console.log('a : ', a);
                function a() {
                    console.log('function a() ...');
                    console.log('abc - a() : ', abc);
                    // 第一次编译期 变量不会提升 调用函数a() 创建a()的AO{}后提升
                    var abc = 999;
                }
                console.log('a : ', a);
                // a(); Uncaught TypeError: a is not a function
                if (false) {
                    var d = 678; // 编译期 变量也会提升
                }
                for (let index = 0; index < 10; index++) {
                    var f = index; // 编译期 变量也会提升
                }
                var b = function () {};
                function c() {}
                console.log('----------------');
                console.log('a : ', a);
                console.log('b : ', b);
                console.log('c : ', c);
                console.log('d : ', d);
            }
            fn(1, 2);

            var ff1 = 111;
            function f1(params) {
                console.log(ff1);
                // console.log(ff2); //  ReferenceError: ff2 is not defined
                console.log(ff3); // 333 window.ff3
            }
            function fn2(params) {
                var ff1 = 222;
                var ff2 = 333;
                ff3 = 333;
                f1(); // 111
                function f3(params) {
                    console.log(ff1);
                }
                f3(); // 222
                f1(); // 111
            }
            fn2();

            //   ==============
            // xx :  undefined
            // yy :  ƒ yy() {}
            // zz :  undefined
            // xx :  ƒ () {}
            // yy :  ƒ yy() {}
            // zz :  666
            // =================
            // a :  ƒ a() {
            //     console.log("function a() ...");
            //     console.log("abc - a() : ", abc);
            //     var abc = 999;
            //   }
            // b :  undefined
            // c :  ƒ c() {}
            // d :  undefined
            // f :  undefined
            // ----------------
            // function a() ...
            // abc - a() :  undefined
            // a :  123
            // a :  123
            // ----------------
            // a :  123
            // b :  ƒ () {}
            // c :  ƒ c() {}
            // d :  undefined
            //   ==============

            // 编译期 1.形参和变量声明赋值undefined -> 2.形参赋值 -> 3.函数声明赋值
            // AO{
            //     --------------|-----|------------------|
            //     a: undefined  |  1  | function a() {}  |
            //     c: undefined  |  2  | function c() {}  |
            //     b: undefined  |     |                  |
            //     d: undefined  |     |                  |
            // }
        </script>
    </body>
</html>
